<template>
    <div class="back_centent" back-centent-sty="font">
        <!-- 表格头部的导航和按钮 -->
        <div class="back_title" v-if="isShow">
            <div class="bar">
                <div class="flag"></div>
                <div class="text">{{ title }}</div>
            </div>
            <div class="but">
                <slot name="buttons"></slot>
            </div>
        </div>
        <!-- 表格主体 -->
        <div class="back_table">
            <slot></slot>
            <!-- 表格头部搜索 -->
            <slot name="head"></slot>
            <!-- 表格内容 -->
            <div class="table_body">
                <slot name="table_body"></slot>
            </div>
            <!-- 分页 -->
            <slot name="page"></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        isShow: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

    }
}
</script>
<style lang="scss">
[back-centent-sty="font"] {
    .el-table th.el-table__cell>.cell {
        font-size: 12px;
        font-weight: 400;
    }
}
</style>
<style lang="scss" scoped>
.back_centent {
    height: 100%;
    display: flex;
    flex-direction: column;

    .back_title {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-content: center;

        .bar {
            display: flex;
            align-items: center;

            .flag {
                width: 20px;
                height: 8px;
                border-radius: 999px;
                background: #006EFF;
                margin-right: 10px;
            }

            .text {
                font-size: 20px;
            }
        }

        .but {
            display: flex;
            align-items: center;
        }
    }

    .back_table {
        flex: 1;
        background: white;
        border-radius: 15px;
        box-shadow: 0px 0px 20px rgb(215 215 215);
        box-sizing: border-box;
        padding: 20px;

        .table_body {}
    }
}
</style>